<template>
  <div class="comment-form">
    <h4>留下您的评论</h4>
    <form class="form-contact comment_form" id="commentForm">
      <div class="row">
        <div class="col-12">
          <div class="form-group">
            <textarea class="form-control w-100" name="comment" v-model="comment.comment" id="comment" cols="30" rows="9"
                                           placeholder="评论内容"></textarea>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
            <input class="form-control" name="name" v-model="comment.name" id="name" type="text" placeholder="姓名">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
            <input class="form-control" name="email" id="email" v-model="comment.mail" type="email" placeholder="邮箱">
          </div>
        </div>
      </div>
      <div class="form-group">
        <button type="button" @click="postComment" class="button button-contactForm btn_1 boxed-btn">提 交 评 论</button>
      </div>
    </form>
  </div>
</template>

<script>
import {postComment} from "@/api/blog";

export default {
  name: "comment",
  created() {
    this.comment.fileId = this.fileId
  },
  data() {
    return {
      comment: [
        {
          comment: '',
          name: '',
          mail: '',
          fileId: ''
        }
      ]
    }
  },
  props: ["fileId"],
  inject: ["fatherMethod"],
  methods: {
    postComment(){
      postComment({
        name: this.comment.name,
        fileId: this.comment.fileId,
        comment: this.comment.comment,
        mail: this.comment.mail,
      })

      this.comment.name = ''
      this.comment.comment = ''
      this.comment.mail = ''

      this.fatherMethod()
    }
  },
}
</script>

<style scoped>

</style>
